import React from 'react'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { Text, View, StyleSheet, Platform } from 'react-native'
import PropTypes from 'prop-types'
import CustomBoxShadow from '../boxshadow/CustomBoxShadow'
import Dot from '../dot'
import { getYearFromFullTime } from '../../utils/TimeUtil'
import { getDegreeLabelByLevel } from '../../utils/ConfigUtil'

export default function EducationInfoCard (props) {
  const { style, dataSource } = props
  return (
    <CustomBoxShadow style={{ ...styles.educationInfoItemView, ...style }}>
      <View style={styles.educationInfoItemTitleView}>
        <Text style={styles.educationInfoItemTitleLeft}>{`${getYearFromFullTime(dataSource.beginTime)} - ${getYearFromFullTime(dataSource.endTime)}`}</Text>
        <Text style={styles.educationInfoItemTitleRight}>{getDegreeLabelByLevel(dataSource.degreeLevel)}</Text>
      </View>
      <View style={styles.educationInfoItemContentView}>
        <Text style={styles.educationSchool}>{dataSource.schoolName}</Text>
        <View style={styles.educationCenterView}>
          <Dot/>
          <View style={styles.educationCenterLine}/>
        </View>
        <Text style={styles.educationProfession}>{dataSource.majorName}</Text>
      </View>
    </CustomBoxShadow>
  )
}
EducationInfoCard.propTypes = {
  dataSource: PropTypes.object,
  style: PropTypes.object
}
EducationInfoCard.defaultProps = {
  dataSource: {}
}
const styles = StyleSheet.create({
  educationInfoItemView: {
    width: ScaleS(335),
    height: Platform.OS === 'ios' ? 'auto' : ScaleS(150),
    // height: ScaleS(150),
    backgroundColor: 'white',
    shadowRadius: ScaleS(59),
    shadowOpacity: 0.5,
    shadowColor: '#E3E5EA',
    paddingVertical: ScaleS(30),
    paddingHorizontal: ScaleS(20),
    borderRadius: ScaleS(20),
    shadowOffset: {
      width: 0,
      height: ScaleS(2)
    }
  },
  educationInfoItemTitleView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  educationInfoItemTitleLeft: {
    color: '#000000',
    fontSize: ScaleT(20),
    fontWeight: 'bold',
    flex: 1
  },
  educationInfoItemTitleRight: {
    color: '#000000',
    fontSize: ScaleT(18),
    fontWeight: '500'
  },
  educationInfoItemContentView: {},
  educationSchool: {
    color: '#444444',
    fontSize: ScaleT(17),
    fontWeight: '400',
    marginLeft: ScaleS(32),
    marginTop: ScaleS(28)
  },
  educationCenterView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  educationCenterLeftView: {
    backgroundColor: '#FFD810',
    width: ScaleS(10),
    height: ScaleS(10),
    borderRadius: ScaleS(8),
    alignItems: 'center',
    justifyContent: 'center'
  },
  educationCenterLeftDot: {
    backgroundColor: 'white',
    borderRadius: ScaleS(3),
    width: ScaleS(6),
    height: ScaleS(6)
  },
  educationCenterLine: {
    flex: 1,
    backgroundColor: '#979797',
    height: ScaleS(1),
    opacity: 0.2457,
    marginLeft: ScaleS(21),
    marginTop: ScaleS(15),
    marginBottom: ScaleS(13)
  },
  educationProfession: {
    color: '#444444',
    fontSize: ScaleT(17),
    fontWeight: '400',
    marginLeft: ScaleS(32)
  }
})
